<template>
    <div id="fullpage" v-fullpage:myFullpage="options">
        <!-- 第一屏 -->
        <div
            class="section"
            data-header="dark"
            :style="{
                backgroundImage:
                    'url(//cdn.zsdx.cn/zsdx-website/2020/images/product/product-bg1.png)',
                opacity: firstShow ? 1 : 0
            }"
        >
            <div
                class="productions-wrap hide"
                :class="[{ turnUp: moduleShow.products }]"
            >
                <div class="productions-title">五大产品支持</div>
                <div class="productions-subtitle">
                    将需求、技术与业务相结合,我们将找到最佳的解决方案
                </div>
                <div class="productions-list">
                    <a
                        v-for="(productItem, pindex) in products"
                        :key="pindex"
                        :href="'#' + options.anchors[pindex + 1]"
                        class="production-unit"
                    >
                        <div
                            class="production-logo-wrap"
                            :style="{
                                background: productItem.color
                            }"
                        >
                            <div
                                class="production-logo"
                                :style="{
                                    backgroundImage:
                                        'url(' + productItem.logo + ')'
                                }"
                            ></div>
                        </div>
                        <div class="production-detail">
                            <div class="production-title">
                                {{ productItem.title }}
                            </div>
                            <div class="production-desc">
                                {{ productItem.desc }}
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!-- 第一屏结束 -->
        <!-- 第二屏 -->
        <div
            class="section"
            data-header="dark"
            :style="{
                backgroundImage:
                    'url(//cdn.zsdx.cn/zsdx-website/2020/images/product/product-bg2.png)',
                opacity: firstShow ? 1 : 0
            }"
        >
            <div class="app-wrap">
                <div
                    class="app-left hide"
                    :class="[{ turnUp: moduleShow.app }]"
                >
                    <div class="product-title">
                        掌上大学APP
                    </div>
                    <div class="product-desc">
                        企业的校园事业部,让全球在校大学生成为精英的互动平台
                    </div>
                    <img
                        class="product-qrcode"
                        src="//cdn.zsdx.cn/zsdx-website/2020/images/common/downloadQRCode.png"
                        title="扫码下载APP"
                    />
                    <div class="qrcode-tip">扫码下载APP</div>
                </div>
                <div
                    class="app-right hide"
                    :class="[{ turnDown: moduleShow.app }]"
                    :style="{
                        backgroundImage:
                            'url(//cdn.zsdx.cn/student-app/images/zsdx_logo1.png)'
                    }"
                ></div>
            </div>
        </div>
        <!-- 第二屏结束 -->
        <!-- 第三屏 -->
        <div
            class="section"
            data-header="dark"
            :style="{
                backgroundImage:
                    'url(//cdn.zsdx.cn/zsdx-website/2020/images/product/product-bg3.png)',
                opacity: firstShow ? 1 : 0
            }"
        >
            <div class="data-wrap">
                <div
                    class="data-left hide"
                    :class="[{ turnUp: moduleShow.data }]"
                >
                    <div class="product-title">
                        大数据系统
                    </div>
                    <div class="product-desc">
                        该大数据系统依托于2017年联合温州大学成立的大数据研究院
                    </div>
                    <div class="product-desc">
                        大数据系统内包含各大学校的大学生男女比例，消费指数，出国情况等；对大学生群体的用户画像相当清晰
                    </div>
                    <button-hover
                        class="product-button"
                        @action="fnGoDataCenter()"
                    />
                </div>
                <div
                    class="data-right hide"
                    :style="{
                        backgroundImage:
                            'url(//cdn.zsdx.cn/zsdx-website/2020/images/product/product-1.png)'
                    }"
                    :class="[{ turnDown: moduleShow.data }]"
                ></div>
            </div>
        </div>
        <!-- 第三屏结束 -->
        <!-- 第四屏 -->
        <div
            class="section"
            data-header="dark"
            :style="{
                backgroundImage:
                    'url(//cdn.zsdx.cn/zsdx-website/2020/images/product/product-bg4.png)',
                opacity: firstShow ? 1 : 0
            }"
        >
            <div class="resource-wrap">
                <div
                    class="resource-left hide"
                    :style="{
                        backgroundImage:
                            'url(//cdn.zsdx.cn/zsdx-website/2020/images/product/product-2.png)'
                    }"
                    :class="[{ turnDown: moduleShow.resource }]"
                ></div>
                <div
                    class="resource-right hide"
                    :class="[{ turnUp: moduleShow.resource }]"
                >
                    <div class="product-title">
                        全国媒介系统
                    </div>
                    <div class="product-desc">
                        该系统自2014年上线至今，已覆盖全国70%高校，包含线上线下的各类媒介信息资源；
                    </div>
                    <div class="product-desc">
                        线上：校园公众号，校园KOC，社群，短视频自媒体
                    </div>
                    <div class="product-desc">
                        线下：路演场地，桌贴，围栏广告等
                    </div>
                    <button-hover
                        class="product-button"
                        @action="fnOpenPage('//cms.zsdx.cn/resource?no=')"
                    />
                </div>
            </div>
        </div>
        <!-- 第四屏结束 -->
        <!-- 第五屏 -->
        <div
            class="section"
            data-header="dark"
            :style="{
                backgroundImage:
                    'url(//cdn.zsdx.cn/zsdx-website/2020/images/product/product-bg5.png)',
                opacity: firstShow ? 1 : 0
            }"
        >
            <div class="manage-wrap">
                <div
                    class="manage-left hide"
                    :class="[{ turnUp: moduleShow.manage }]"
                >
                    <div class="product-title">
                        校园代管理系统
                    </div>
                    <div class="product-desc">
                        掌上大学依据七年与大学生合作的经验，独立研发出远程监控和管理校园代理动作的“神器”
                    </div>
                    <button-hover
                        class="product-button"
                        @action="fnOpenPage('http://amb2.zsdx.cn/')"
                    />
                </div>
                <div
                    class="manage-right hide"
                    :style="{
                        backgroundImage:
                            'url(//cdn.zsdx.cn/zsdx-website/2020/images/product/product-5.png)'
                    }"
                    :class="[{ turnDown: moduleShow.manage }]"
                ></div>
            </div>
        </div>
        <!-- 第五屏结束 -->
        <!-- 第六屏 -->
        <div
            class="section"
            data-header="dark"
            :style="{
                backgroundImage:
                    'url(//cdn.zsdx.cn/zsdx-website/2020/images/product/product-bg6.png)',
                opacity: firstShow ? 1 : 0
            }"
        >
            <div class="case-wrap">
                <div
                    class="case-left hide"
                    :style="{
                        backgroundImage:
                            'url(//cdn.zsdx.cn/zsdx-website/2020/images/product/product-4.png)'
                    }"
                    :class="[{ turnDown: moduleShow.case }]"
                ></div>
                <div
                    class="case-right hide"
                    :class="[{ turnUp: moduleShow.case }]"
                >
                    <div class="product-title">
                        校园内参
                    </div>
                    <div class="product-desc">
                        7年资源沉淀的集中体现，涵盖数据报告大学生蓝书，调研报告，客户案例复盘报告等，帮助企业的校园部门人员快速提高专业度，帮助企业无限放大预算的投入产出比
                    </div>
                    <button-hover
                        class="product-button"
                        @action="fnOpenPage('//cms.zsdx.cn/material?no=')"
                    />
                </div>
            </div>
        </div>
        <!-- 第六屏结束 -->
    </div>
</template>

<script>
import buttonHover from '@/components/common/button-hover'
export default {
    components: { buttonHover },
    data() {
        return {
            firstShow: false,
            moduleShow: {
                products: false,
                app: false,
                data: false,
                resource: false,
                manage: false,
                case: false
            },
            options: {
                licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
                navigation: false,
                scrollBar: false,
                scrollOverflow: true,
                paddingTop: '70px',
                anchors: [
                    'products',
                    'app',
                    'data',
                    'resource',
                    'manage',
                    'case'
                ],
                css3: true,
                controlArrows: false,
                afterLoad: this.afterLoad,
                afterRender() {},
                afterResize(...args) {
                    // console.log('resize', args)
                }
            },
            products: [
                {
                    logo:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/product/product-logo1.png',
                    title: '掌上大学APP',
                    desc: '开创学生价商城',
                    color:
                        'linear-gradient(135deg,rgba(251,73,107,1) 0%,rgba(245,35,57,1) 100%)'
                },
                {
                    logo:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/product/product-logo2.png',
                    title: '大数据系统',
                    desc: '全国各大高校的大学生数据分析系统',
                    color:
                        'linear-gradient(135deg,rgba(57,80,248,1) 0%,rgba(25,76,247,1) 100%)'
                },
                {
                    logo:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/product/product-logo3.png',
                    title: '全国媒介系统',
                    desc: '全国2400所高校媒介资源，行业成本价投放',
                    color:
                        'linear-gradient(135deg,rgba(140,87,247,1) 0%,rgba(104,35,245,1) 100%)'
                },
                {
                    logo:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/product/product-logo4.png',
                    title: '校园代管理系统',
                    desc: '实时掌握校园代理工作过程、项目进度及时反馈',
                    color:
                        'linear-gradient(135deg,rgba(251,210,73,1) 0%,rgba(245,166,35,1) 100%)'
                },
                {
                    logo:
                        '//cdn.zsdx.cn/zsdx-website/2020/images/product/product-logo5.png',
                    title: '校园内参',
                    desc: '7年经验沉淀，快速帮助企业缩小打入大学生群体的成本',
                    color:
                        'linear-gradient(135deg,rgba(67,206,255,1) 0%,rgba(32,160,255,1) 100%)'
                }
            ]
        }
    },
    created() {
        if (!process.server) {
            this.$store.commit('header/setStyle', 'dark')
        }
    },
    mounted() {
        this.firstShow = true
    },
    methods: {
        onLeave(from, to, direction) {
            this.firstShow = true
            if (to.item.dataset.header == 'dark') {
                this.$store.commit('header/setStyle', 'dark')
            } else {
                this.$store.commit('header/setStyle', 'default')
            }
        },
        afterLoad(from, to, direction) {
            this.firstShow = true
            this.moduleShow[to.anchor] = true
        },
        fnGopage() {},
        fnGoDataCenter() {
            const ticket = this.$getSessionTicket()
            const url = 'http://data.zsdx.cn/college?session_ticket=' + ticket

            this.fnOpenPage(url)
        },
        fnOpenPage(url) {
            window.open(url)
        }
    }
}
</script>

<style lang="less" scoped>
.section {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity linear 0.2s;
    background-color: #fff;
}
@keyframes turnUp {
    0% {
        transform: translateY(500px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes turnDown {
    0% {
        transform: translateY(-500px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.hide {
    opacity: 0;
}
.turnUp {
    animation: turnUp 0.6s ease-out;
    opacity: 1;
}
.turnDown {
    animation: turnDown 0.6s ease-out;
    opacity: 1;
}

.productions-wrap {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.productions-title {
    height: 60px;
    font-size: 60px;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    line-height: 60px;
    margin-top: 100px;
}
.productions-subtitle {
    height: 30px;
    font-size: 30px;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    line-height: 30px;
    margin-top: 36px;
}
.productions-list {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-right: -25px;
    margin-top: 82px;
    margin-bottom: 10px;
}
.production-unit {
    background: #fff;
    display: flex;
    flex-direction: column;
    width: 220px;
    height: 296px;
    margin-right: 25px;
}
.production-logo-wrap {
    padding: 33px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.production-logo {
    width: 94px;
    height: 94px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.production-detail {
    padding: 16px;
    box-sizing: border-box;
}
.production-title {
    font-size: 24px;
    font-weight: 400;
    color: rgba(29, 32, 35, 1);
    line-height: 24px;
}
.production-desc {
    font-size: 16px;
    font-weight: 400;
    color: rgba(96, 105, 114, 1);
    line-height: 22px;
    margin-top: 12px;
    letter-spacing: 0;
    text-align: justify;
}
.app-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    .app {
        &-left {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding-left: 21%;
            // <div class="product-title">
            //     掌上大学APP
            // </div>
            // <div class="product-desc">
            //     企业的校园事业部,让全球在校大学生成为精英的互动平台
            // </div>
            // <img class="product-qrcode" src="" title="扫码下载APP" />
            // <div class="qrcode-tip">扫码下载APP</div>
            .product-title {
                height: 32px;
                font-size: 32px;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                line-height: 32px;
            }
            .product-desc {
                width: 256px;
                height: 48px;
                font-size: 16px;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                line-height: 24px;
                margin-top: 32px;
            }
            .product-qrcode {
                width: 120px;
                height: 120px;
                border: 5px solid rgba(255, 255, 255, 0.2);
                margin-top: 50px;
            }
            .qrcode-tip {
                width: 120px;
                margin-top: 10px;
                text-align: cetner;
                height: 20px;
                font-size: 14px;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                line-height: 20px;
            }
        }
        &-right {
            align-self: flex-end;
            width: 56.5%;
            height: 0;
            padding-top: 38.9%;
            background-image: url(//cdn.zsdx.cn/zsdx-website/2020/images/product/product-0.png);
            background-position: right bottom;
            background-size: contain;
            background-repeat: no-repeat;
        }
    }
}

.data-wrap,
.resource-wrap,
.manage-wrap,
.case-wrap {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.data,
.manage {
    &-right {
        width: 56%;
        height: 0;
        padding-top: 43%;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    &-left {
        width: 44%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding-left: 10%;
    }
}
.resource,
.case {
    &-left {
        width: 56%;
        height: 0;
        padding-top: 43%;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    &-right {
        width: 44%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding-left: 10%;
    }
}

.product-title {
    height: 32px;
    font-size: 32px;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 32px;
}
.product-desc {
    margin-top: 32px;
    width: 320px;
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 24px;
}
.product-button {
    margin-top: 48px;
}
</style>
